<template>
<div class="detective-task common-page" >
  <xdh-list-panel 
    title="任务列表"
    :fit="true"
    :state="state" :sizes="[10]" :size="10"
    :is-auto="true" :pager="true"
    :load="listLoad" 
   > <!--   -->
    <template slot="tool"> 
      <el-button type="primary" size="mini" @click="toEdit">新增</el-button>
    </template>
    <xdh-table :data="state.list"
      :columns="tableCols" 
      height="100%" 
      border 
      size="mini"
    >
      <template slot="ctrl" slot-scope="scope">
        <el-button size="mini" type="text" @click="listClick(scope)">编辑</el-button>
        <el-button size="mini" type="text" >删除</el-button>
      </template>
    </xdh-table>
  </xdh-list-panel>
</div>
</template>

<style lang="scss" scoped>
// @import "../../../../../src/style/variables/_default.scss";
@import "../../../../src/style/_vars.scss";
.detective-task{
  padding: 10px;
  background: $--background-color-base;
}
</style>

<script>
import detectiveTask from '@/base/mixin/detective-detect-task'
import XdhListPanel from '@/widgets/xdh-list-panel'
import XdhTable from '@/widgets/xdh-table'
const INDEXCOL = { type: 'index', label: '序号', fixed: 'left', width: '80' }
const CONTROLCOL = { label: '操作', fixed: 'right', width: '120', prop: 'ctrl' }
export default {
  name: 'detectiveTask',
  mixins: [detectiveTask],
  components: {
    XdhListPanel,
    XdhTable
  },
  props: {
  },
  data() {
    return {
      state: {
        list: [],
        total: 0
        
      },
      tableCols: []
    }
  },
  watch: {
    
  },
  methods: {
    listLoad(page, limit) {
      return this.getDetectiveTasks({
        limit: limit, page: page
      }).then((res) => {
        this.state.list = res.list
        this.state.total = res.total
        this.tableCols = this._tableColumnInit(res.colData)
      })
    },
    listClick(row) {
      console.log(row)
    },
    toEdit() {
      this.$router.push({
        path: '/detective-task/edit'
      })
    },
    _tableColumnInit(colData) { // 初始化列表头
      let contents = colData.map((item) => {
        return {
          label: item.label,
          prop: item.prop,
          showOverflowTooltip: true
        }
      })
      return [ INDEXCOL, ...contents, CONTROLCOL ]
    }
  },
  mounted() {
    // this.getDetectiveTasks({
    //   pageIndex: 1, pageSize: 20
    // }).then((res) => { console.log(res) })
  }
}
</script>

